<template>
    <div class="account-wrapper">
        <div class="framework">
            <header><span>部门列表</span>
                <div class="input-wrapper">
                    <input/>
                    <el-icon><search/></el-icon>
                </div>
                <el-icon class="more-filled" :size="16"><moreFilled/></el-icon>
            </header>
            <el-divider />
            <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" />
        </div>
        <div class="table-wrapper">
            <div class="search">
                <div class="item">工号<input placeholder="请输入工号"/></div>
                <div class="item">姓名<input placeholder="请输入姓名"/></div>
                <div class="item">
                    <el-button>重置</el-button>
                    <el-button type="primary">查询</el-button>
                </div>
            </div>
            <div class="table-content">
                <header>
                    <span>账户列表</span>
                    <div class="button-wrapper">
                        <el-button>新增按钮</el-button>
                        <el-divider direction="vertical" />
                        <el-icon :size="20"><Refresh/></el-icon>
                        <el-icon :size="20"><Setting/></el-icon>
                    </div>
                </header>
                <main>
                    <el-table :data="tableData" style="width: 100%;height:calc(100% - 36px)" border>
                        <el-table-column label="Date" width="180">
                            <template #default="scope">
                                <div style="display: flex; align-items: center">
                                    <el-icon><timer /></el-icon>
                                    <span style="margin-left: 10px">{{ scope.row.date }}</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="Name" width="180">
                            <template #default="scope">
                                <el-popover effect="light" trigger="hover" placement="top" width="auto">
                                    <template #default>
                                        <div>name: {{ scope.row.name }}</div>
                                        <div>address: {{ scope.row.address }}</div>
                                    </template>
                                    <template #reference>
                                        <el-tag>{{ scope.row.name }}</el-tag>
                                    </template>
                                </el-popover>
                            </template>
                        </el-table-column>
                        <el-table-column label="Operations">
                            <template #default="scope">
                                <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
                                >Edit</el-button
                                >
                                <el-button
                                    size="small"
                                    type="danger"
                                    @click="handleDelete(scope.$index, scope.row)"
                                >Delete</el-button
                                >
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination layout="prev, pager, next" :total="1000" />
                </main>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import {Refresh,Setting,Search,MoreFilled} from '@element-plus/icons-vue';
import { Timer } from '@element-plus/icons-vue'

interface User {
    date: string
    name: string
    address: string
}

const handleEdit = (index: number, row: User) => {
    console.log(index, row)
}
const handleDelete = (index: number, row: User) => {
    console.log(index, row)
}

const tableData: User[] = [
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
]
//树形结构
interface Tree {
    label: string
    children?: Tree[]
}

const handleNodeClick = (data: Tree) => {
    console.log(data)
}

const data: Tree[] = [
    {
        label: '通号部',
        children: [
            {
                label: '一中心',
                children: [
                    {
                        label: 'X号线轨旁X工班',
                    },
                ],
            },
            {
                label: '二中心',
                children: [
                    {
                        label: 'X号线轨旁X工班',
                    },
                ],
            },
            {
                label: '三中心',
                children: [
                    {
                        label: 'X号线轨旁X工班',
                    },
                ],
            },
        ],
    },
]

const defaultProps = {
    children: 'children',
    label: 'label',
}
</script>

<style scoped lang="scss">
.account-wrapper {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;

    .framework {
        margin: 15px;
        padding: 6px;
        height: calc(100% - 30px);
        background: #ffffff;
        width: 25%;
        header{
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            .input-wrapper{
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                .el-icon{
                    width: 32px;
                    height: 30px;
                    border: 1px solid #d4d4d4;
                }
                input {
                    width: 150px;
                    padding-left: 4px;
                    margin-left: 10px;
                    height: 32px;
                    background: #ffffff;
                    border-radius: 0;
                    border: 0.1px solid #d4d4d4
                }
                input::-webkit-input-placeholder { /* WebKit browsers*/
                    padding-left: 2px;
                    font-size: 14px;
                }
            }
            .more-filled{
                margin-left:30px ;
                transform:rotate(90deg) ;
            }
        }
        .el-divider{
            margin: 6px 0;
        }
    }

    .table-wrapper {
        margin: 15px 15px 15px 0;
        height: calc(100% - 30px);
        width: calc(75% - 15px - 15px);
        .search {
            background: #ffffff;
            height: 10%;
            margin-bottom: 15px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            .item {
                margin: 0 10px;

                input {
                    padding-left: 4px;
                    margin-left: 10px;
                    height: 32px;
                    background: #ffffff;
                    border-radius: 0;
                    border: 0.1px solid #d4d4d4
                }

                input::-webkit-input-placeholder { /* WebKit browsers*/
                    padding-left: 2px;
                    font-size: 14px;
                }
            }
        }
        .table-content {
            background: #ffffff;
            height: calc(90% - 15px);
            padding: 6px;
            header{
                height: 32px;
                margin-bottom: 10px;
                span{
                    margin-left: 10px;
                    font-size: 16px;
                }
                .button-wrapper{
                    margin-right: 10px;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                }
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
            }
            main{
                height: calc(100% - 32px - 10px);
                position: relative;
                .el-pagination{
                    position: absolute;
                    right: 0;
                    bottom: 0;
                }
            }
        }
    }
}
</style>
